<template>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <li v-for="item in list" :key="item.id" @click="toDetail(item.id)">
                    <div class="itemimg">
                        <img v-lazy="item.image" alt="">
                    </div>
                    <div class="iteminfo">
                        <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
                        <p class="price">￥ {{ item.price }}</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>
<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request.js'
export default {
    setup() {
        const list = ref([])
        const loading = ref(false) // 加载状态
        const finished = ref(false) // 是否加载完成
        const pagination = ref(1) // 页码
        const isLoading = ref(false) // 下拉刷新的状态
        const router = useRouter()
        const onLoad = () => {
            loading.value = true
            request.get('/list', {
                params: {
                    pagination: pagination.value, // 变量
                    pageNum: 10
                }
            }).then(res => {
                if (res.data.code == 200) {
                    // res.data.data永远只有10条数据
                    // this.list = res.data.data

                    // 数组拼接  concat  
                    // this.list = this.list.concat(res.data.data)
                    // es6中数组的扩展
                    list.value = [...list.value, ...res.data.data]
                }
                // 关闭loading
                loading.value = false
                // 页码+1
                pagination.value++
                // 判断是否还有数据
                if (list.value.length >= res.data.total) {
                    // 数据请求完毕
                    finished.value = true
                }
            })
        }
        const onRefresh = () => {
            // 下拉的时候展示loading
            // 延时一秒后关闭loading,同时展示刷新成功
            isLoading.value = true
            setTimeout(() => {
                isLoading.value = false
            }, 1000)
        }
        const toDetail = (id) => {
            router.push(`/detail/${id}`) // es6中的模板字符串
        }
        return {
            list,
            loading,
            finished,
            pagination,
            isLoading,
            onLoad,
            onRefresh,
            toDetail
        }
    }
}
</script>
<style lang="scss" scoped>
ul {
    overflow: hidden; // 解决高度塌陷

    // column-count: 2; // 列数
    // column-gap: 10px; // 列间距

    li {
        float: left;
        width: 49%;
        margin: 0.5%;

        // break-inside: aviod; //  避免在元素内部换行

        .itemimg {
            img {
                width: 100%;
            }
        }

        .iteminfo {
            padding: 2px 8px;

            .price {
                color: red;
            }

        }
    }
}
</style>